Skip to main content

How to Embed your Talkyard forum

You can embed your Talkyard forum in an <iframe> on your website.

In most cases you would not want to do that — it's better to have your forum on its own subdomain, like forum.your-website.com.

  • Better for SEO: Search engines like Google can index your forum content and see it as part of your website. Content inside an <iframe> is often ignored by search engines.

  • Better User Experience: A full-page forum is easier to navigate and feels less cramped.

However, sometimes embedding makes sense.

Step-by-step instructions​

Let's imagine your website is https://www.your-website.com and your Talkyard forum is at https://your-forum.talkyard.net.

Then, to embed the forum, first configure Talkyard, then add a code snippet to your website.

Configure Talkyard​

You need to tell Talkyard that it's okay for your website to embed the forum.

  1. Go to your Talkyard admin settings for embedding. The URL will look like this:
    https://your-forum.talkyard.net/-/admin/settings/embedded-comments.
    Replace your-forum.talkyard.net with your actual forum address.

  2. In the Allow embedding from field, type the address of your website where the forum will be embedded. In our example, it's: https://www.your-website.com.

  3. Ignore the sections "Which blog do you use?" and "Instructions for ..." — they're for blog comments.

  4. Click Save all changes at the bottom.

Edit your website​

Now, you'll add two pieces of HTML to the page where you want the forum to appear.

  1. Copy the code block below and paste it onto your webpage. A good place is right before the closing </body> tag.

    Note: Change the talkyardServerUrl to your own forum's URL.

    <script type="text/javascript">
    // --- Change this URL to your Talkyard forum's address ---
    talkyardServerUrl = 'https://your-forum.talkyard.net';
    </script>
    <script async defer src="https://c1.ty-cdn.net/-/talkyard-forum.min.js"></script>

    (If you're self-hosted, change https://c1.ty-cdn.net above to your Talkyard server URL.)

  2. Add the following <div> where you want the forum to show up on your page.

    Usually it's best to place this at the end of your page content, because the forum <iframe> resizes its height to fit the current forum page. This means that on pages with long discussions, the forum's height increases a lot, which pushes any content below it down the page.

    <div class="talkyard-forum"></div>

  3. Reload the page, and the forum should appear.

Exactly how you make the above changes, depends on what website software you use. For example, if you have a WordPress website, or a Hugo static website, or something else. You might need to consult the documentation.

Admin and user settings​

For security reasons, you cannot edit admin settings, or certain user profile settings, from within the embedded forum <iframe>. Instead, visit the forum directly:

  • Admin settings: https://your-forum.talkyard.net/-/admin/
  • User profile settings: https://your-forum.talkyard.net/-/users/some_username
  • Group settings: https://your-forum.talkyard.net/-/groups/

You don't need to do anything special for links to work.

If you share a link to a page in the forum, our script automatically makes sure the embedded forum shows the correct page.

This works because the script (that is, talkyard-forum.min.js) adds a '#' symbol plus the path to the Talkyard forum page, to your webpage's URL.

It can look like this: https://www.your-website.com/forum#/-123/a-discussion-topic (note the #)

And then, when someone visits that link, the script reads the part after the # and tells the embedded forum to load that discussion topic.

If you try to copy a link by right-clicking it, or open it in a new tab by middle-clicking, you sometimes get a broken URL. This is because a fully working right-click-copy-link feature hasn't been implemented everywhere.

Need Help?​

If you run into troubles, please ask for help: https://forum.talkyard.io